<script setup>
import { Star, Pointer, Download } from "@element-plus/icons-vue";

const {
  params: { id },
} = useRoute();

const router = useRouter()
console.log(id)
const collected = ref(false)

const size = ref('default')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
const navItems = [
  { title: '项目介绍' },
  { title: '挂牌信息' },
  { title: '披露信息' },
  { title: '联系方式' },
  { title: '项目附件' },
]
const tableData = [
  {
    name: "项目名称1",
    id: "申请号123456",
    type: "专利",
    applyDay: "2023-01-01",
    authDay: "2023-06-01"
  },
]
function buyProject() {
  const { query } = useRoute()
  navigateTo({
    path: '/transactions/results-detail-apply',
    query: {
      id: query.id
    }
  })
}
</script>

<template>
  <div class=" w-fll overflow-hidden">
    <div class=rounded-20px bg-white p-20px>
      <commonTitle title="吉林大学所持双层无避让立体停车设备专利权转让" class="w-full">
        <template #right-util>
          <!--收藏-->
          <div>
            <el-button type="primary" size="small" @click="collected = !collected" class="cus-btn text-#333"
              :class="{ 'active': collected }">
              <el-icon class="mr-10px">
                <Star />
              </el-icon>
              {{ collected ? '已收藏' : '收藏' }}
            </el-button>
          </div>
          <!--阅读量-->
          <div>
            <el-button type="text" plain size="small" class="text-#333!">
              <el-icon class="mr-10px">
                <Pointer />
              </el-icon>
              阅读量：100 次
            </el-button>
          </div>
        </template>
      </commonTitle>
      <div class="h-3px  my-10px bg-#FFEDED "></div>
      <!--购买链接-->
      <div class="flex justify-between items-center">
        <div class="text">
          <span>网上报名点击</span>
          <span class="text-#7F0102">我要购买</span>
        </div>
        <el-button type="primary" size="small" class="rounded-md" @click="buyProject">我要购买</el-button>
      </div>
      <!--简要信息-->
      <div class="simple-info ">
        <el-descriptions class="mt-10px" :column="2" :size="size" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                项目名称
              </div>
            </template>
            吉林大学所持双层无避让立体停车设备专利权转让
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                项目编号
              </div>
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                保证金
              </div>
            </template>
            xxx万元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                保证金支付方式
              </div>
            </template>
            现金
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                挂牌公告期
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </div>


    <!-- 导航 -->
    <nav>
      <ul class="flex h-60px items-center">
        <li v-for="(item, index) in navItems" @click="scrollToSection(index)" :key="index" class="flex-1 text-center"
          :class="{ active: activeIndex === index }">
          {{ item.title }}
        </li>
      </ul>
    </nav>

    <!-- 内容区域 -->
    <div class="content ">
      <div ref="ref-section-1" class=rounded-20px bg-white p-20px>
        <commonTitle title="项目介绍">
        </commonTitle>
        <div class="text-center font-500 text-18px text-#333">技术信息登记表（供给方）</div>
        <el-descriptions class="mt-10px content-desc" :column="1" :size="size" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                技术项目名称
              </div>
            </template>
            吉林大学所持双层无避让立体停车设备专利权转让
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                行业分类
              </div>
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                战略性新兴产业
              </div>
            </template>
            xxx万元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                需求所属领域
              </div>
            </template>
            需求所属领域
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                意向合作周期
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                意向投入资金
              </div>
            </template>
            xxx万元
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                预计投入时间
              </div>
            </template>
            xxx万元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                项目简介
              </div>
            </template>
            1.专利介绍: 专利申请日:2018年8月16日授权公告日:2024年1月16日
            专利权期限:20年 介绍:随着汽车保有 量的不断上升，停车难的问题越来越突出，
            为了解决这一问题，在大型商场等华区域，各种大型的立体停车
            设备不断涌现。但是针对空间狭小的区域，比如私家车库和马路旁边的停车位，
            设计一个占地面积小自实用 的小型立体停车设备变得很有价值，
            目前小型的双层立体停车设备在顶会车辆驶入和驶离车位时，
            大多需要 保证底层车位无车辆，这无疑使得该种设备使用起来很不方便，应用受到限制，
            本发明所要解决的技术问题
            是克服了现有技术存在的顶层车位进出车辆过程中底层车位需要避让与载车板在工作过程中处于悬普状态而
            承受较大宫矩的问题，提供了一种双层无避让立体停车设备。为解决上述技术问题，
            本发明是采用如下技术 方案实现的:所述的双层无避让立体停车设备包括支撑框架、拖机构、托举机构与载车板。
            2.截至挂牌日，已 取得发明专利证书.
          </el-descriptions-item>
        </el-descriptions>
        <div class="text-center font-500 text-18px text-#333 my-10px">专利明细</div>
        <el-table :data="tableData" style="width: 100%" border header-row-class-name="content-table-header">
          <el-table-column type="index" label="序号" align="center" header-align="center" width="70">
          </el-table-column>
          <el-table-column prop="name" label="名称" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="id" label="申请号" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="type" label="类别" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="applyDay" label="申请日" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="authDay" label="授权日" align="center" header-align="center">
          </el-table-column>
        </el-table>
        <!-- 资助情况 -->
        <el-descriptions class="mt-10px content-desc" :column="2" :size="size" border>
          <el-descriptions-item :span="2">
            <template #label>
              <div class="cell-item">
                获得资助情况（国家计划课 题等）
              </div>
            </template>
            --
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template #label>
              <div class="cell-item">
                项目开发阶段
              </div>
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                样品情况
              </div>
            </template>
            xxx万元
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                样品类型
              </div>
            </template>
            需求所属领域
          </el-descriptions-item>

        </el-descriptions>
      </div>
      <div ref="ref-section-2" class="rounded-20px bg-white p-20px mt-20px">
        <!-- 挂牌信息 -->
        <commonTitle title="挂牌信息" class="mt-10px" />
        <el-descriptions class="mt-10px content-desc" :column="2" :size="size" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                挂牌公告期
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                报价方式
              </div>
            </template>
            <el-button type="text">
              询价
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                保证金
              </div>
            </template>
            <el-button type="text">
              1万元
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                保证金交纳截止时间
              </div>
            </template>
            挂牌截止日17:00前（已银行到账时间为准）
          </el-descriptions-item>

        </el-descriptions>
      </div>
      <div ref="ref-section-3" class="rounded-20px bg-white p-20px mt-20px">
        <!-- 披露信息 -->
        <commonTitle title="披露信息" class="mt-10px" />
        <el-descriptions class="mt-10px content-desc" :column="2" :size="size" border>
          <el-descriptions-item :span=2>
            <template #label>
              <div class="cell-item">
                价款支付方式
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
          <el-descriptions-item :span=2>
            <template #label>
              <div class="cell-item">
                保证金
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
          <el-descriptions-item :span=2>
            <template #label>
              <div class="cell-item">
                重大事项及其他披露内容
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>
          <el-descriptions-item :span=2>
            <template #label>
              <div class="cell-item">
                与转让的其他条件
              </div>
            </template>
            2022年01月01日-2022年01月01日
          </el-descriptions-item>

        </el-descriptions>
      </div>
      <div ref="ref-section-4" class="rounded-20px bg-white p-20px mt-20px">
        <!-- 联系方式 -->
        <commonTitle title="联系方式" class="mt-10px" />
        <el-descriptions class="mt-10px content-desc" :column="2" :size="size" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                联系人
              </div>
            </template>
            王经理
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                联系电话
              </div>
            </template>
            18888888888
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                手机号
              </div>
            </template>
            18888888888
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                邮箱
              </div>
            </template>
            18888888888
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div ref="ref-section-4" class="rounded-20px bg-white p-20px mt-20px">
        <commonTitle title="附件资料" class="mt-10px" />
        <div class="flex justify-between items-center pt-2 pl-10px">
          <span class="text-18px text-#333">山东省中业集团主粮突破“揭榜挂帅”行动通知.docx</span>
          <el-button type="primary" :icon="Download" circle />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep(.cus-btn) {
  border: none;
  color: #333;
  background: #FFF8F8;

  &:hover {
    color: white;
    background: #7f0102;
  }

  &.active {
    color: white;
    background: #7f0102;
  }
}

.simple-info,
.content-desc {
  .cell-item {
    min-width: 200px;
    text-align: center;
    color: #7F0102;
    background-color: #FFF8F8;
    font-size: 15px;
    font-weight: 400px;
  }
}

::v-deep(.content-desc) {
  .el-descriptions__cell.el-descriptions__label {
    background-color: #FFF8F8;
    width: 200px;
  }

  .el-descriptions__cell.el-descriptions__content {
    text-align: center;
  }
}

::v-deep(.content) {
  .content-table-header {

    th,
    tr {
      background: #fbfbfb !important;
      // color: #333333;
    }
  }
}

::v-deep(.simple-info) {
  .el-descriptions__cell.el-descriptions__label {
    background-color: #FFF8F8;
  }
}
</style>